@extends("admin.layout.main")
@section('content')
    <div id="app">

        <Row type="flex"  align="middle">
            <Spin size="large" fix v-if="spinShow"></Spin>
            <i-col span="35" style="margin: 20px ;">
                <span>
                    店铺:
                    <i-select v-model="shop_id" placeholder="请选择店铺" style="width:180px">
                        <i-option value="0">全部店铺</i-option>
                        <i-option v-for="shop of shops" :value="shop.shop_id">@{{shop.shop_name}}</i-option>
                    </i-select>
                </span>

                <span>
                    &nbsp&nbsp&nbsp开始时间:
                     <date-picker type="datetime"
                                  format="yyyy-MM-dd HH:mm:ss"
                                  :value="defaultStartTime"
                                  placeholder="选择开始日期" style="width: 200px"
                                  @on-change="dateStartFormat">
                    </date-picker>
                </span>
                <span>
                    &nbsp&nbsp&nbsp结束时间:
                     <date-picker type="datetime"
                                  format="yyyy-MM-dd HH:mm:ss"
                                  :value="defaultEndTime"
                                  placeholder="选择结束时间" style="width: 200px"
                                  @on-change="dateEndFormat">
                    </date-picker>
                </span>
                <span style="padding-left: 10px">
                      <i-button type="primary" @click="today">切换当天</i-button>
                </span>

            </i-col>
            <i-col  style="margin: 20px ;width: 100%">
                <span>
                    订单号:
                     <i-input v-model="order_id" style="width:200px"></i-input>
                </span>

                <span>
                   &nbsp&nbsp&nbsp订单状态:
                    <i-select v-model="order_status" placeholder="请选择状态" style="width:200px">
                        <i-option value="0" >全部</i-option>
                        <i-option :value="item.order_status" v-for="item of options" :key="item.order_status">@{{ item.text }}</i-option>
                    </i-select>
                     <span>
                          &nbsp&nbsp&nbsp导表格式:
                          <i-select v-model="guide_form" style="width:150px">
                              <i-option :value="guide.val" v-for="guide of guides">@{{guide.text}}</i-option>

                          </i-select>
                      </span>
                      <a :href="combine_link" style="display: inline-block;margin-left: 15px;">订单下载</a>
                      <a :href="combine_link_goods" style="display: inline-block;margin-left: 15px;">销量统计下载</a>
                </span>
            </i-col>


            <i-col span="250" style="margin: 20px;">
                <span>
                    厂家 :
                    <radio-group v-model="manu_name" type="button">
                        <Radio :label='key' v-for="(tab,key) of tabs">
                           @{{ key+'('+tab+')'}}

                        </Radio>
                    </radio-group>
                </span>


                <span style="padding-left: 10px">
                      <i-button type="primary" @click="orderList">查询</i-button>
                       <span >
                          <i-button  type="error" @click="updateOrder(2)">同步订单</i-button>
                       </span>
                       <span >
                          <span style="width: 100px;display: inline-block">
                             <Upload >
                                <i-button icon="ios-cloud-upload-outline">快递单号回填Excel上传</i-button>
                            </Upload>
                          </span>
                        </span>
                </span>
            </i-col>

            <i-col style="width: 50% ;margin:20px">
                <Card>
                    <p v-for="card of cards">
                        店铺: <span v-if="card.api_count == card.system_count" style="display:inline-block;width: 150px">@{{card.shop_name}}</span>
                        <span v-else style="color: red;display:inline-block;width: 150px">@{{card.shop_name}}</span>
                        <span style="display:inline-block;width: 150px">api备货数 : @{{ card.api_count }}</span>
                        <span style="display:inline-block;width: 150px">本地备货数 : @{{ card.system_count }}</span>
                    </p>
                </Card>
            </i-col>


        </Row>
        <Row type="flex" justify="center" align="middle">
            <i-col span="23" style="margin-top: 20px">
                <i-table ref="selection" :data="tableData" :columns="tableColumns" stripe
                         style="width: 100% !important;">
                </i-table>
            </i-col>
        </Row>

        <Row type="flex" justify="center" class="code-row-bg">
            <i-col>
                <Page
                        size="small"
                        :total="page.total"
                        :current="page.current"
                        :page-size="page.pageSize"
                        show-total
                        show-elevator
                        @on-change="orderList">

                </Page>
            </i-col>
        </Row>

    </div>


    <script src="/js/vue.js"></script>
    <script src="/js/iview.js"></script>
    <script src="/js/axios.min.js"></script>

    <script>
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    options: [],
                    guides:[
                        {"val":"Normal","text":"普通"},
                        {"val":"NoSale","text":"无售价"},
                        {"val":"Hzbb","text":"杭州包包"},
                    ],
                    guide_form: "Normal",
                    tableColumns: [
                        {
                            title: '店铺名',
                            width: '100',
                            key: 'shop_name',
                        },

                        {
                            title: '厂家',
                            width: '100',
                            key: 'manu_name'
                        },
                        {
                            title: '订单编号',
                            width: '100',
                            key: 'order_id',
                        },
                        {
                            title: '详细',
                            width: '150',
                            render: (h, params) => {
                                let product_name = params.row.prod_detail;
                                let link = 'https://haohuo.jinritemai.com/views/product/item2/?id=' + params.row.origin_prod_id;
                                return h('a', {
                                    domProps: {
                                        href: link,
                                        target: '_blank'
                                    },
                                }, product_name)
                            }
                        },
                        {
                            title: '商户备注',
                            width: '100',
                            key:'seller_words'
                        },
                        {
                            title: '颜色',
                            width: '80',
                            key: 'color'
                        },
                        {
                            title: '尺码',
                            width: '80',
                            key: 'size'
                        },
                        {
                            title: '主播',
                            width: '80',
                            key: 'liver'

                        },
                        {
                            title: '跟播',
                            width: '80',
                            key: 'wither'
                        },
                        {
                            title: '内部货号',
                            width: '120',
                            key: 'prod_no',
                        },
                        {
                            title: '下单数量',
                            width: '100',
                            key: 'combo_num',
                        },
                        {
                            title: '售价',
                            width: '80',
                            key: 'total_amount',
                        },
                        {
                            title: '成本价',
                            width: '80',
                            key: 'cost_price',
                        },
                        {
                            title: '用户留言',
                            width: '80',
                            key: 'buyer_words',
                        },

                        {
                            title: '收件人',
                            width: '80',
                            key: 'post_receiver',
                        },
                        {
                            title: '收件人手机号',
                            width: '80',
                            key: 'post_tel',
                        },
                        {
                            title: '收货地址',
                            width: '120',
                            key: 'full_addr',
                        },

                        {
                            title: '订单提交时间',
                            width: '150',
                            key: 'create_time',
                        },
                        {
                            title: '更新时间',
                            width: '100',
                            key: 'updated_at',
                        },
                    ],
                    tableData: [],
                    spinShow: false,
                    token: '',
                    //查询条件

                    shop_id: '0',
                    start_time: '',
                    end_time: '',
                    manu_name: '',
                    order_id: '',
                    prod_name: '',
                    order_status: 2,
                    shops: [],
                    tabs: [],
                    cards: [],
                    page: {
                        total: 0,
                        current: 1,
                        pageSize: 50,
                    },
                    defaultStartTime: '',
                    defaultEndTime: ''
                }
            },
            mounted() {
                this.token = window.localStorage.getItem('current_user');
                this.defaultStartTime = this.getValidDate(1) + ' 00:00:00';
                this.defaultEndTime = this.getValidDate(0) + ' 10:30:00'
                this.$Message.config({
                    top: 90,
                    duration: 3
                });
            },
            methods: {

                today() {
                    this.defaultStartTime = this.start_time = this.getValidDate(0) + ' 00:00:00';
                    this.defaultEndTime = this.end_time = this.getValidDate(-1) + ' 00:00:00';
                },
                compareList(start_time = '', end_time = '') {
                    that = this;
                    url = '/api/order/fxg_statistic?start_time=' + this.start_time + '&end_time=' + this.end_time;
                    axios.get(url)
                        .then(function (response) {
                            that.cards = response.data;
                        })
                        .catch(function (error) {
                            that.$Message.error('服务器异常');
                        });
                },
                /*
                * 获取订单列表
                * */
                orderList(page = 1) {
                    let that = this;
                    this.spinShow = true;
                    axios.get("/admin/order/list", {
                        params: {
                            token:vm.token,
                            shop_id: that.shop_id,
                            start_time: that.start_time,
                            end_time: that.end_time,
                            manu_name: that.manu_name,
                            order_id: that.order_id,
                            order_status: this.order_status,
                            page: page
                        }
                    })
                        .then(function (response) {
                            vm.tableData = response.data.result.data;
                            vm.page.total = response.data.result.total;
                            vm.page.current = response.data.result.current_page;
                            vm.page.pageSize = response.data.result.per_page;
                            vm.spinShow = false;
                        })
                        .catch(function (error) {
                            this.$Message.error('服务器异常');
                        });
                    this.orderManuCount();
                    this.compareList();
                },
                //  初始化店铺
                getShop() {
                    axios.get("https://order.youdnr.com/api/temai/order/fxg_shop_list",{
                    })
                        .then(function (response) {
                            vm.shops = response.data.result;
                        });
                },
                // 获取厂家订单统计
                orderManuCount () {
                    that = this;
                    axios.get("/admin/order/manu/count", {
                        params: {
                            shop_id: that.shop_id,
                            start_time: that.start_time,
                            end_time: that.end_time,
                            order_status: that.order_status,
                            token:vm.token,
                        }
                    })
                        .then(function (response) {
                            vm.tabs = response.data.result;
                        })
                        .catch(function (error) {
                            this.$Message.error('服务器异常');
                        });
                },
                // 获取订单状态
                getOrderStatus () {
                    that = this;
                    axios.get("/admin/config/get", {
                        params: {
                            key:'order_status',
                            token:vm.token,
                        }
                    })
                        .then(function (response) {
                            vm.options = response.data.result;
                        })
                        .catch(function (error) {
                            this.$Message.error('服务器异常');
                        });
                },
                /*获取几天前时间日期*/
                getValidDate(dayCount = 1) {
                    curDate = new Date();
                    preDate = new Date(curDate.getTime() - dayCount * 24 * 60 * 60 * 1000);

                    year = preDate.getFullYear();
                    month = preDate.getMonth() + 1;
                    if (month < 10) {
                        month = '0' + month;
                    }
                    day = preDate.getDate();
                    if (day < 10) {
                        day = '0' + day;
                    }
                    result = year + '-' + month + '-' + day;
                    return result;
                },
                // 首次请求
                firstRequest() {
                    let that = this;
                    this.spinShow = true;
                    let start_time = this.getValidDate(1) + ' 00:00:00';
                    let end_time = this.getValidDate(0) + ' 10:30:00';
                    this.start_time = start_time;
                    this.end_time = end_time;
                    this.order_status = 2;
                    axios.get("/admin/order/list", {
                        params: {
                            start_time: start_time,
                            end_time: end_time,
                            order_status: 2,
                            token:vm.token
                        }
                    })
                        .then(function (response) {
                            vm.tableData = response.data.result.data;
                            vm.page.total = response.data.result.total;
                            vm.page.current = response.data.result.current_page;
                            vm.page.pageSize = response.data.result.per_page;
                            that.spinShow = false;
                        })
                        .catch(function (error) {
                            that.$Message.error('服务器异常');
                        });
                    this.orderManuCount();
                    this.getOrderStatus();
                    this.getShop();
                    this.compareList();
                },
                dateStartFormat(f, v) {
                    this.start_time = f;
                },
                dateEndFormat(f, v) {
                    this.end_time = f;
                },
                updateOrder(day){  //同步订单数据
                    if(day == 2){ //两天前
                        start_time  = this.getValidDate(2)+' 00:00:00';
                    }

                    vm.$Message.warning('【同步】订单中，请耐心等候！');
                    axios.post("/api/order/fxg",{
                        start_time:start_time
                    })
                        .then(function (response) {
                            if(response.data.code == 400){
                                vm.$Message.error(response.data.msg);
                            }else{
                                vm.$Message.success(response.data.msg);
                                vm.orderList();
                            }
                        }) .catch(function (error) {
                            vm.$Message.error('服务器异常');
                        });
                },
            },

            computed: {
                combine_link() {
                    return '/admin/order/export?shop_id=' + this.shop_id + '&start_time=' + this.start_time + '&end_time=' + this.end_time +
                        '&manu_name=' + this.manu_name + '&order_id=' + this.order_id +
                        '&order_status=' + this.order_status + '&token=' + this.token +
                        '&guide_form=' + this.guide_form;
                },
                combine_link_goods(){
                    return '/admin/order/export_goods?shop_id=' + this.shop_id + '&start_time=' + this.start_time + '&end_time=' + this.end_time +
                        '&manu_name=' + this.manu_name + '&order_id=' + this.order_id +
                        '&order_status=' + this.order_status + '&token=' + this.token +
                        '&guide_form=' + this.guide_form;
                }
            }
        });

        vm.firstRequest();
    </script>
@endsection

